import React, { useState } from 'react'
import { PullToRefresh, List, Toast, NavBar, InfiniteScroll } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import './index.less'
import { LocationOutline } from 'antd-mobile-icons'
import { history } from 'umi';
export default () => {
  let [lis, setList] = useState([
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
    { name: '内容' },
  ])
  // 生成数据
  const mockRequest = async () => {
    let count = 0;
    if (count >= 5) {
      return []
    }
    await sleep(2000)
    count++
    let objs = [{ name: '新内容' }, { name: '新内容' }, { name: '新内容' }, { name: '新内容' }, { name: '新内容' }];
    return objs

  }
  // 控制下拉状态
  let [sta, setSta] = useState(true)
  const loadMore = async () => {
    const append = await mockRequest()
    setList(lis => [...lis, ...append])
    setSta(append.length > 0)
    Toast.show({
      icon: 'success',
      content: '刷新成功',
    })

  }
  // 回到顶部
  const back = () => {
    let scrollToptimer = setInterval(function () {
      console.log(document.body);
      console.log(document.body.scrollTop);
      console.log(document.documentElement.scrollTop);

      let top = document.body.scrollTop || document.documentElement.scrollTop
      let speed = top / 30;
      document.documentElement.scrollTop -= speed;

      if (top == 0) {
        clearInterval(scrollToptimer);
      }
    }, 5);
  }
  const goback = () => {
    history.goBack()
  }
  // 底部刷新

  // 渲染
  return (
    <div style={{ marginBottom: 30, height: 1000, }}>
      <>
        <NavBar onBack={goback}>内容</NavBar>
        <div className="ding" onClick={() => { back() }}>
          <LocationOutline />
        </div>
        <PullToRefresh
          onRefresh={async () => {
            await sleep(1000);
            Toast.show({
              icon: 'success',
              content: '刷新成功',
            })
          }}
        >



          <List style={{ minHeight: '100vh' }}>
            {lis.map((item, index) => (
              <List.Item key={index}>{item.name}</List.Item>
            ))}
          </List>
     
         <InfiniteScroll loadMore={loadMore} hasMore={sta} />
        </PullToRefresh>
        {/* <InfiniteScroll loadMore={loadMore} /> */}
        
      </>
    </div>
  )
}